dateMenu: Move weather forecast time above icon

The time is de-emphasized like the header, grouping them together
helps to further accentuate the more important information.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1143

diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index fcd4448add785c4c1a92965c15abba46519564ac..a1dbe873166f9b97fc11f37736401b7074fb4f7a 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -218,6 +218,13 @@
     spacing-columns: $base_spacing * 2;
   }
 
+  .weather-forecast-time {
+    color: darken($fg_color,30%);
+    font-feature-settings: "tnum";
+    @include fontsize($base_font_size - 2);
+    font-weight: normal;
+  }
+
   .weather-forecast-icon {
     icon-size: $base_icon_size * 2;
   }
@@ -225,13 +232,6 @@
   .weather-forecast-temp {
     font-weight: bold;
   }
-
-  .weather-forecast-time {
-    color: darken($fg_color,30%);
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 2);
-    font-weight: normal;
-  }
 }
 
 /* World clocks */

diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index e7d3c47b26d453b5abfc779745660834c2d4c8a0..1fd6ccdbc22cf3ddee3403e7808976bd6f09309d 100644 (file)
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -351,6 +351,11 @@ class WeatherSection extends St.Button {
             const [, tempValue] = fc.get_value_temp(GWeather.TemperatureUnit.DEFAULT);
             const tempPrefix = tempValue >= 0 ? ' ' : '';
 
+            let time = new St.Label({
+                style_class: 'weather-forecast-time',
+                text: timeStr,
+                x_align: Clutter.ActorAlign.CENTER,
+            });
             let icon = new St.Icon({
                 style_class: 'weather-forecast-icon',
                 icon_name: fc.get_symbolic_icon_name(),
@@ -362,18 +367,13 @@ class WeatherSection extends St.Button {
                 text: '%s%.0f°'.format(tempPrefix, tempValue),
                 x_align: Clutter.ActorAlign.CENTER,
             });
-            let time = new St.Label({
-                style_class: 'weather-forecast-time',
-                text: timeStr,
-                x_align: Clutter.ActorAlign.CENTER,
-            });
 
             temp.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
             time.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
 
-            layout.attach(icon, col, 0, 1, 1);
-            layout.attach(temp, col, 1, 1, 1);
-            layout.attach(time, col, 2, 1, 1);
+            layout.attach(time, col, 0, 1, 1);
+            layout.attach(icon, col, 1, 1, 1);
+            layout.attach(temp, col, 2, 1, 1);
             col++;
         });
     }